<template>
	<view class="h-screen flex flex-col">
		<NavBarVue title="档案列表"></NavBarVue>
		<view class="p-30">
			<view class="flex items-center p-10 bg-[#EDFCFF] rounded-md mb-20">
				<ImageBoxVue src="/static/icons/icon_notice.png" width="56rpx" height="56rpx"></ImageBoxVue>
				<text class="text-xs text-[#666666]">档案仅显示200条，查看更多档案可使用搜索功能</text>
			</view>
			<view class="box-search flex flex-col justify-center pl-40 pr-40">
				<view class="flex items-center mb-20">
					<uni-easyinput class="flex-1 mr-20" v-model="nickname" placeholder="请输入搜索内容" confirmType="search"
						@change="handleSearch"></uni-easyinput>
					<ImageBoxVue src="/static/study/button.png" width="88rpx" height="69rpx" @click="handleSearch"></ImageBoxVue>
				</view>
				<view class="flex items-center" v-show="chooseObjList.length">
					<text>已选择1人：</text>

					<view v-for="(item, idx) in chooseObjList" :key="idx">
						<text v-if="idx != 0">，</text>
						<text>{{item.nickname}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-30">
					<view class="flex justify-between bg-white rounded-lg mb-30 p-30" v-for="e,i in archiveList" :key="i"
						@click="handleChoose(e)">
						<view class="flex-1">
							<view>
								<text class="text-sm font-bold">{{e.nickname}}</text>
								<text class="mx-10">|</text>
								<text>{{config.relatList[e.relat]}}</text>
							</view>
							<view class="my-10">
								<text>{{dayjs(e.birthday).format('YYYY-MM-DD HH:mm:ss')}}</text>
							</view>
							<view>
								<text>{{e.birthpro}}</text>
								<text>{{e.birthcity}}</text>
								<text>{{e.birthdis}}</text>
								<text class="mx-10">|</text>
								<text>{{e.respro}}</text>
								<text>{{e.rescity}}</text>
								<text>{{e.resdis}}</text>
							</view>
						</view>
						<view class="flex justify-center items-center">
							<ImageBoxVue v-if="chooseList.indexOf(e.id) > -1" src="/static/icons/selected.png" width="36rpx"
								height="37rpx"></ImageBoxVue>
							<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="37rpx"></ImageBoxVue>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex items-center p-30">
			<view class="flex-1 p-20 bg-[#329EFF] text-center rounded-full text-white mr-30" @click="handleGoAdd">添加档案</view>
			<view class="flex-1 p-20 text-center rounded-full text-white mr-30"
				:class="[chooseOne?'bg-[#329EFF]':'bg-[#DDE1E3]']" @click="handleSubmit(1)">单盘</view>
			<view class="flex-1 p-20 text-center rounded-full text-white" :class="[chooseTwo?'bg-[#329EFF]':'bg-[#DDE1E3]']"
				@click="handleSubmit(2)">合盘</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import dayjs from "dayjs"
	import config from '@/config';
	import userApi from '@/apis/apiList/userApi.js';
	const archiveId = ref()
	const nickname = ref('')
	const archiveList = ref([])
	const chooseList = ref([])
	const chooseObjList = ref([])

	const chooseLen = computed(() => chooseList.value.length)

	const chooseOne = computed(() => {
		if (chooseList.value.length == 1) {
			return true
		} else {
			return false
		}
	})

	const chooseTwo = computed(() => {
		if (chooseList.value.length == 2) {
			return true
		} else {
			return false
		}
	})

	onShow(() => {
		membergetDosslist()
	})

	const handleSearch = () => {
		membergetDosslist()
	}

	const handleChoose = (item) => {
		const idx = chooseList.value.indexOf(item.id)
		if (idx == -1) {
			if (chooseLen.value == 2) {
				return
			}
			chooseList.value.push(item.id)
			chooseObjList.value.push(item)
		} else {
			chooseList.value.splice(idx, 1)
			chooseObjList.value.splice(idx, 1)
		}
	}

	const handleGoAdd = () => {
		uni.navigateTo({
			url: `/pages/views/archiveAdd`
		})
	}

	const handleSubmit = (type) => {
		if ((type == 1 && chooseOne.value) || (type == 2 && chooseTwo.value)) {
			uni.$emit('choose', chooseList.value)
			uni.navigateBack({
				delta: 1
			})
		}
	}

	const membergetDosslist = () => {
		userApi.membergetDosslist({
			"member.id": uni.getStorageSync('user').id,
			nickname: nickname.value
		}).then(res => {
			archiveList.value = res.data
		})
	}

	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.box-search {
		background: url(/static/test/bg_search.png) no-repeat;
		background-size: cover;
		width: 706rpx;
		height: 200rpx;
	}

	:deep(.uni-easyinput__content) {
		border-radius: 999px !important;
	}
</style>